<template>
  <view class="goods-container">

    <view class="top-content">
      <view class="goods-img">
        <image class="img" :src="`https://www.worldintek.com:39011/yaolexue-service/${goodsInfo.imageDto.compressLink}`"
          mode=""></image>
      </view>
      <view class="goods-info">
        <view class="goods-name">
          {{ goodsInfo.productName }}
        </view>
        <view class="goods-num">
          数量 x {{ num }}
        </view>
        <view class="score">
          <image class="score-img" src="https://www.worldintek.com:39011/yaolexue-service/icon_xuefen.png" mode="">
          </image>
          <view class="score-num">
            {{ displayPrice }}
          </view>
        </view>
      </view>
      <view v-if="showOrderStatus" class="order-status">
        {{ getOrderStatusText(goodsInfo.status) }}
      </view>
    </view>
    <view v-if="showBottomContent" class="bottom-content flex justify-end ">
      <t-button v-if="goodsInfo.status === 2" @handleBtnClick="handleGoodsInfo" class="t-button " btnBox="false"
        borderRadius="40" lineWidth="215" lineHeight="70" content="查看详情" backgroundColor="#FFFFFF"
        color="#999999"></t-button>
      <view v-else-if="goodsInfo.status === 3" class="flex justify-end flex1">
        <t-button @handleBtnClick="handleGoodsInfo" class="t-button" btnBox="false" borderRadius="40" lineWidth="215"
          lineHeight="70" content="查看详情" backgroundColor="#FFFFFF" color="#999999"></t-button>
        <t-button @handleBtnClick="confirmReceipt" class="t-button" btnBox="false" borderRadius="40" lineWidth="215"
          lineHeight="70" content="确认收货" backGround="#FA312A" color="#FFFFFF"></t-button>
      </view>
      <view v-else-if="goodsInfo.status === 4" class="flex justify-end flex1">
        <t-button @handleBtnClick="handleGoodsInfo" class="t-button" btnBox="false" borderRadius="40" lineWidth="215"
          lineHeight="70" content="查看详情" backgroundColor="#FFFFFF" color="#999999"></t-button>
        <t-button @handleBtnClick="confirmReceipt" class="t-button" btnBox="false" borderRadius="40" lineWidth="215"
          lineHeight="70" content="确认收货" backGround="#FA312A" color="#FFFFFF"></t-button>
      </view>

      <t-button v-else @handleBtnClick="deleteOrder" class="t-button" btnBox="false" borderRadius="40" lineWidth="215"
        lineHeight="70" content="删除订单" backgroundColor="#FFFFF" color="#999999"></t-button>

    </view>
  </view>
</template>

<script>
export default {
  name: "com-goodsInfo",
  data() {
    return {
      quantity: 1,
      num: 1
    };
  },
  onLoad() { },
  methods: {
    handleGoodsInfo() {
      console.log('查看详情');
      this.$emit('viewDetail', this.goodsInfo)
    },
    confirmReceipt() {
      console.log('确认收货');
      this.$emit('confirmReceipt', this.goodsInfo);
    },
    deleteOrder() {
      console.log('删除订单');
      this.$emit('deleteOrder', this.goodsInfo);
    },
    getOrderStatusText(status) {
      console.log(status, 'status')
      switch (status) {
        case 2:
          return '待发货';
        case 3:
          return '待确认';
        case 4:
          return '确认收货';
        case 5:
          return '已完成';
        default:
          return '未知状态';
      }
    },
  },
  computed: {
    // 使用 computed 属性根据传递的属性类型动态显示价格
    displayPrice() {
      return this.totalAmount ? this.totalAmount : this.price;
    }
  },
  props: {
    showOrderStatus: {
      type: Boolean,
      default: false
    },
    showBottomContent: {
      type: Boolean,
      default: false
    },
    goodsInfo: {
      type: Object | Array,
      default: {}
    },
    // num: {
    //       type: Number,
    //       default: 1
    //     },
    totalAmount: {
      type: Number,
      default: 0
    },
    price: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-container {
  width: 689rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  // margin: 21rpx 0 0 0;
  padding: 21rpx 19rpx 21rpx 19rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .top-content {
    display: flex;
    align-items: center;
    padding: 31rpx 0;

    .goods-img {
      width: 150rpx;
      height: 150rpx;
      background: #E1E1E1;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: content-box;
      overflow: hidden;

      .img {
        width: 150rpx;
        height: 150rpx;
      }
    }

    .goods-info {
      margin-left: 11rpx;

      .goods-name {
        min-width: 358rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }

      .goods-num {
        min-width: 90rpx;

        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        margin: 20rpx 0 12rpx 0;
      }

      .score {
        display: flex;

        &-img {
          width: 34rpx;
          height: 34rpx;
        }

        &-num {
          width: 42rpx;
          font-size: 27rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FA312A;
          margin-left: 9rpx;
        }
      }
    }

    .order-status {
      width: 105rpx;
      height: 30rpx;
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FA312A;
      position: relative;
      top: -100rpx;
      right: -50rpx;
    }
  }

  .bottom-content {
    // width: 100%;
    display: flex;
    height: 97rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #EAEAEA;
    justify-content: flex-end;

    .t-button {
      // margin-left: 435rpx;
    }
  }
}
</style>